/*  header-comment
/*  file   : /Users/allan/Desktop/workSpace/react-hrm-h5/src/modules/hrCenter/selfHelp/index
/*  author : Allan
/*  date   : 2017-6-4 18:24:50
/*  last   : 2017-11-1 13:25:52
*/
import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { WhiteSpace, Button } from "@ali/ding-ui";
import "./index.less";
import { setTitle, setRight, openLink,toast } from "../../../utils/dingtalk.js";
import { get } from "../../../utils/db";
import { inviteOpenHrmCenter } from "../../../actions/hrCenter/";
import { fetchListGroup } from "../../../actions/selfHelp/";
import urlParams from "../../../utils/urlParams";
import HelpModal from "../../../components/HelpModal";
import { setCacheData, getCacheData } from "../../../utils/storeCache.js";

const corpId = urlParams.getUrlSearchParam("corpId");

const cacheUrl = "/hrmregister/mobile/workbench/getSelfService";
//是否是预发环境
const isPre = window.location.href.indexOf("pre") !== -1 ? true : false;
//假勤管理
const leaveList = [
  {
    ret:'leave',
    name: "我的假期",
    icon: "https://gw.alicdn.com/tfs/TB1gZuea3nD8KJjy1XdXXaZsVXa-102-102.png",
    url: `https://${isPre
      ? "pre-"
      : ""}aflow.dingtalk.com/dingtalk/mobile/homepage.htm?corpid=${corpId}&dd_share=false&showmenu=true&swfrom=hrmPerson#/leaveBalance`
  },
  {
    ret:"attend",
    name: "我的考勤",
    icon: "http://static.dingtalk.com/media/lALOcsYpu8zIzMg_200_200.png",
    url: `https://${isPre
      ? "pre-"
      : ""}attend.dingtalk.com/attend/index.html?corpId=${corpId}#stat`
  }
];

const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {
      dispatch,
      fetchListGroup,
      inviteOpenHrmCenter
    },
    dispatch
  )
});

@connect(mapStateToProps, mapDispatchToProps)
export default class selpHelp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemGroup: "",
      hrCenterInfo: "",
      showNotification: false
    };

    setRight({
      show: false
    });
    setTitle({
      title: "自助服务"
    });
  }

  //联系主管理员开通
  notifyAdmin() {
    this.props.actions.inviteOpenHrmCenter().then(res => {
      if (res.success) {
        toast({ text: "已发送", icon: "success" });
        // this.setState({
        //   showNotification: false
        // })
      }      
    })
  }

  //关闭提醒
  closeNotification() {
    const corpId = get("corpId");
    window.localStorage.setItem(`serviceCenter_closeNotice${corpId}`,"true");
    this.setState({
      showNotification: false
    })
  }

  getListGroup(showLoading) {
    this.props.actions.fetchListGroup({ showLoading }).then(res => {
      let showNotification = false;
      if (res.result.generalAdmin && !res.result.alreadyInited) {
        showNotification = true;
      }
      setCacheData(cacheUrl, res.result);
      // console.log(res.result);
      this.setState({
        showNotification,
        itemGroup: res.result
      });
    });
  }
  async componentDidMount() {
    this.needReload();
    //缓存
    const cacheSelfHelpData = await getCacheData(cacheUrl);
    if (cacheSelfHelpData) {
      this.setState({
        itemGroup: cacheSelfHelpData
      });
    }
    this.getListGroup(!cacheSelfHelpData);
  }

  componentWillUnmount() {
    window.needReload = null;
  }
  //待刷新
  needReload() {
    const t = this;
    window.needReload = function () {
      if (window.location.href.indexOf("selfHelp") !== -1) {
        t.getListGroup(false)
      }
    };
  }

  render() {
    const { itemGroup } = this.state;
    const corpId = urlParams.getUrlSearchParam("corpId");
    //是否是管理员
    const isAdmin = window.__auth && window.__auth.admin || false;
    if (!itemGroup.processItemGroup) {
      return null;
    }
    let leaveRows = []; 
    if(itemGroup.processItemGroup.GROUP_ATTENDANCE){
      leaveRows = itemGroup.processItemGroup.GROUP_ATTENDANCE.concat(leaveList);
    }
    const isShowNotification = this.state.showNotification && (window.localStorage.getItem(`serviceCenter_closeNotice${corpId}`) !== "true");
    return (
      <div className="self-help-container" style={{ zIndex: isShowNotification ? 11 : 0 }}>
        <HelpModal/>
        {
          isShowNotification && 
          <div className="notification_container send-manager">
            <div className="close_btn" onClick={() => this.closeNotification()}>
                ×
            </div>
            <img src="https://gw.alicdn.com/tfs/TB18ROZbMvD8KJjy0FlXXagBFXa-957-1434.png" className="feature_img" alt="feature_img" />
            <Button className="notify_btn" type="primary" onClick={() => this.notifyAdmin()}>
              联系主管理员开通权限
            </Button>
          </div>
        }
        <div className="employee-roster">
          <h4>假勤管理</h4>
          <ul>
            {leaveRows.map((item, index) => (
              <li
                className="menu-item"
                onClick={() => {
                  if(item.ret){
                    window._rlog(`_self_help_${item.ret}`);
                  }else{
                    window._rlog(`_self_help_aflow`);
                  }
                  openLink(item.url);
                }}
              >
                <img src={item.icon} alt="" />
                <p>{item.name}</p>
              </li>
            ))}
          </ul>
        </div>
        <WhiteSpace size="lg"/>
        <div className="employee-roster">
          <h4>人事申请</h4>
          <ul>
            {itemGroup.processItemGroup.GROUP_HRM.map((item, index) => (
              <li
                className="menu-item"
                onClick={() => {
                  let _url = item.url;
                  window._rlog(`_self_help_aflow`);
                  //非管理员不展示价值点
                  if (!isAdmin) {
                    const params = {
                      noWelcome: 1
                    }
                    _url = urlParams.replaceSearch(params, _url);
                    _url = _url + "#/custom";
                  }
                  openLink(_url);
                }}
              >
                <img src={item.icon} alt="" />
                <p>{item.name}</p>
              </li>
            ))}
          </ul>
        </div>
        <div style={{paddingBottom:'130'}}></div>
        {/* <div className="employee-roster">
          <h4>人事申请</h4>
          <ul>
            {
              leaveList.map((item) => <li
                  className="menu-item"
                  onClick={()=>{
                    openLink(item.url)
                  }}
                   >
                  <img src={item.img} alt="" />
                  <p>{item.title}</p>
                </li>)
            }
            </ul>
        </div> */}
      </div>
    );
  }
}
